<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <style>
        input {
            outline: none;
            border: none;

        }

        a {
            text-decoration: none;
        }

        .login {
            border: 1px solid black;
            box-sizing: border-box;
            padding: 25px;
            width: 335px;
        }

        .login-header {

            height: 65px;
            /* background-color: antiquewhite; */
        }

        .login-header .method {
            display: flex;
            justify-content: space-between;
        }

        .login-header .method a {
            text-decoration: none;
            font-size: 18px;
            color: black;
            padding-bottom: 5px;


        }

        .login-header .code {
            margin-top: 10px;
            margin-left: 170px;
        }

        .login-header .code a {
            text-decoration: none;
            font-size: 16px;
            color: #4fc89a;

        }

        .login .content1 {
            display: block;
            height: 250px;
            /* background-color: aqua; */
            box-sizing: border-box;
            padding-top: 10px;
        }

        .content1 .item {
            display: flex;
            width: 283px;
            box-sizing: border-box;
            border: 1.5px solid #4fc89a;
            height: 35px;
            /* background-color: aliceblue; */
        }

        .content1 .item span {
            display: inline-block;
            width: 32.5px;
            height: 32.5px;
            background-color: #cecccf;
        }

        .content1 .item input {
            width: 240px;
        }

        .content1 .msg {
            width: 240px;
            height: 20px;
            color: red;
            font-size: 14px;
        }

        .content1 .agree {
            color: #c4c4c4;
        }

        .content1 .btn button {
            margin: 20px 0;
            width: 282px;
            height: 35px;
            border: none;
            background-color: #4fc89a;
        }

        .content1 .footer {
            display: flex;
            justify-content: space-between;
            font-size: 15px;
            color: black;
        }

        .content1 .footer a {
            color: black;
        }

        .content2 {
            display: none;
            height: 250px;
            background-color: bisque;
        }

        .active {
            border-bottom: 2px solid #4fc89a;
        }
    </style>
</head>

<body>
    <div class="login">
        <div class="login-header">
            <div class="method">
                <a href="javascript:;" data-id="0" class="active">账户登录</a>
                <a href="javascript:;" data-id="1">二维码登录</a>
            </div>
            <div class="code"><a href="javascript:;">手机验证码登录</a></div>
        </div>
        <div class="content1">
            <form action="" method="get" target="_self">
                <div class="item">
                    <span></span>
                    <input type="username" placeholder="用户名" name="username">
                </div>
                <div class="uname-msg msg"></div>
                <div class="item">
                    <span></span>
                    <input type="password" placeholder="密码" name="psd">
                </div>
                <div class="psd-msg msg"></div>
                <div class="agree">
                    <input type="checkbox">
                    <span>我已同意<a href="javascript:;">《服务条款》</a></span>
                </div>
                <div class="btn">
                    <button>登录</button>
                </div>
            </form>

            <div class="footer">
                <a href="javascript:;">忘记密码？</a>
                <a href="javascript:;">免费注册</a>
            </div>
        </div>
        <div class="content2">二维码</div>
    </div>
    <script>
        //父元素对象
        const m = document.querySelector('.login .method')
        // 给父元素绑定事件监听，采用事件委托
        m.addEventListener('click', function (e) {
            if (e.target.tagName === 'A') {
                const active = document.querySelector('.method .active')
                if (active) {
                    active.classList.remove('active')
                }
                e.target.classList.add('active')
                const i = +e.target.dataset.id
                if (i === 0) {
                    document.querySelector(`.content${i + 1}`).style.display = 'block'
                    document.querySelector(`.content${i + 2}`).style.display = 'none'
                } else {
                    document.querySelector(`.content${i}`).style.display = 'none'
                    document.querySelector(`.content${i + 1}`).style.display = 'block'
                }

            }
        })
        // 验证用户名
        const uname = document.querySelector('[type=username]')
        uname.addEventListener('change', verifyName)
        function verifyName() {
            const span = document.querySelector('.uname-msg')
            const flag = /^[a-zA-Z0-9-_]{6,10}$/.test(uname.value)
            if (!flag) {
                span.innerHTML = '输入不合法，请输入6-10位'
                return false
            }
            span.innerHTML = ''
            return true
        }
        // 验证密码
        const psd = document.querySelector('[type=password]')
        psd.addEventListener('change', verifyPsd)
        function verifyPsd() {
            const span = document.querySelector('.psd-msg')
            const flag = /^\w{6,16}$/.test(psd.value)
            if (!flag) {
                span.innerHTML = '输入不合法，6-16位数字字母组成'
                return false
            }
            span.innerHTML = ''
            return true
        }
        //登录
        const loginBtn = document.querySelector('.btn button')
        const agree=document.querySelector('.agree input')
        loginBtn.addEventListener('click',function(e){
            if(!agree.checked){
                e.preventDefault()
                alert('请同意服务条款')
            }
            if(!verifyName()) e.preventDefault()
            if(!verifyPsd()) e.preventDefault()
        })
    </script>
</body>

</html>